<template>
  <div class="box">
    <el-card class="box-card">
      <div class="right-float">
        <div class="register" v-if="titleFlag == '登录'">
          <span>没有账号?</span>
          <a href="#" @click="toRegister">点击注册</a>
        </div>
        <div class="login" v-else>
          <span>已有账号?</span>
          <a href="#" @click="toLogin">点击登录</a>
        </div>
      </div>
      <h2>{{ titleFlag }}</h2>
      <el-form
        :model="userMsg"
        ref="loginForm"
        :rules="loginRules"
        label-position="left"
        label-width="90px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="userMsg.username"
            placeholder="请输入用户名"
            clearable
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="userMsg.password"
            type="password"
            placeholder="请输入密码"
            show-password
            clearable
          />
        </el-form-item>
        <el-form-item
          v-if="titleFlag == '注册'"
          label="确认密码"
          prop="checkpassword"
        >
          <el-input
            v-model="userMsg.checkpassword"
            type="password"
            placeholder="请确认密码"
            show-password
            clearable
          />
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item
          prop="verifycode"
          label="验证码"
          v-if="titleFlag == '登录'"
        >
          <el-input
            v-model="userMsg.verifycode"
            placeholder="请输入验证码"
            class="identifyinput"
          >
          </el-input>
        </el-form-item>
        <el-form-item v-if="titleFlag == '登录'">
          <div class="identifybox">
            <div @click="refreshCode">
              <s-identify :identifyCode="identifyCode"></s-identify>
            </div>
            <div @click="refreshCode">看不清，换一张</div>
          </div>
        </el-form-item>

        <!-- 登录或者注册按钮 -->
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm(loginForm)"
            class="sbtn"
            >{{ titleFlag }}</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script setup>
//导入验证码组件
import SIdentify from "./components/CanVas.vue"
//导入登录的hook
import { useLogin } from "./hooks/useLogin"
//登录数据
const {
  userMsg,
  loginRules,
  submitForm,
  loginForm,
  toRegister,
  titleFlag,
  toLogin,
  identifyCode,
  refreshCode,
} = useLogin()
</script>
<style lang="stylus" scoped>
.box
  width 100vw
  height 100vh
  background-image url('@/assets/images/traffic2.webp')
  overflow hidden
  background-repeat no-repeat
  background-size 100% 100%
  font-size 20px
  .box-card
    position relative
    margin 25% auto
    background-color rgba(0,0,0,.3)
    width 80%
    color #fff
    .right-float
      position absolute
      right 20px
      a
        text-decoration underline
        color #409eff
    .el-button
      width 100%
      margin-top 10px
    h2
      margin-bottom 20px
    .el-form
      .sbtn
        font-size 16px
        height 30px
      .el-form-item
        margin-bottom 10px
      >>>.el-form-item__label
        color #fff
        font-size 15px
      >>>.el-form-item__error
        color #e74133
      .el-input
        height 25px
        >>>.el-input__wrapper
         background-color rgba(0,0,0,.4)
         padding 5px
        >>>.el-input__inner
          color #fff
          font-size 15px
      .identifybox
        margin-top 7px
        div
          font-size 14px
          color #67a72e
</style>
